import logo from './logo.svg';
import './App.css';
import React, { useCallback, useEffect, useState } from 'react';
import { click } from '@testing-library/user-event/dist/click';
import { useMemo,useRef} from 'react';
import { createPortal } from 'react-dom';
// <></>就是<fragment><fragment/>的简写，可以包含多个组件一起返回，作用很大，使用 Fragment 对元素进行组合后不会影响布局和样式。
 function Blog() {
  return (
    <>
      <Post title="An update" body="It's been a while since I posted..." />
      <Post title="My new blog" body="I am starting a new blog!" />
    </>
  )
}

function Post({ title, body }) {
  return (
    <>
      <PostTitle title={title} />
      <PostBody body={body} />
    </>
  );
}

function PostTitle({ title }) {
  return <h1>{title}</h1>
}

function PostBody({ body }) {
  return (
    <article>
      <p>{body}</p>
    </article>
  );
}

export default Blog;
